import { StrategyType } from "@/types";
import { View } from "@tarojs/components";
import dayjs from "dayjs";
import { Fire } from "@taroify/icons";

export default ({ item }: { item: StrategyType }) => {
  const [left, right] = item.event.split("VS");
  return (
    <View className=" relative rounded-xl shadow text-xs bg-white py-4 flex justify-center items-center flex-col">
      <View className="text-gray-300">
        {dayjs(item.starttime).format("MM-DD HH:mm")}
      </View>
      <View className="flex justify-around items-center w-full">
        <View className="text-base flex-1 font-medium text-end"> {left} </View>
        <View className="w-8 text-center">VS</View>
        <View className="text-base flex-1 font-medium">{right}</View>
      </View>
      <View className="">
        <Fire color="#1989FA" />
      </View>
      <View className="absolute top-3 left-3">{item.league}</View>
    </View>
  );
};
